import React, { useRef } from "react";
import { Input, Icon } from "react-native-elements";

const SearchInput = (props) => {

    const _ref = useRef(null);
    const ref = props.searchRef || _ref;
    return (
        <Input
            {...props}
            containerStyle={{
                backgroundColor: "transparent",
                borderTopWidth: 0,
                borderBottomWidth: 0,
            }}
            inputContainerStyle={{
                backgroundColor: "#fff",
                borderRadius: 50,
                paddingTop: 0,
                paddingBottom: 0,
                height: 40,
                borderBottomWidth: 0,
                paddingLeft: 18,
                paddingRight: 5
            }}
            inputStyle={{
                fontSize: 16
            }}
            placeholder={"金刚2005"}
            returnKeyLabel={"搜索"}
            returnKeyType={"search"}
            rightIcon={() => (
                <Icon name={"search"} type={"feather"} color={"#999"} />
            )}
            renderErrorMessage={false}
            clearButtonMode={"while-editing"}
            underlineColorAndroid={"transparent"}
            ref={ref}
        />
    );
};

export default SearchInput;
